<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="content">
    <section><p style="display:none"><br></p></section>
    <section class="wxAyDiy">
        <section style="padding: 10px; box-sizing: border-box;">
            <section style="width:100%;"><img src="http://cmswx.aykj.net/temp/1590496145317.jpg"></section>
            <section style="width:100%; text-align:center; color:#323333; margin-top:10px;">小满不满，麦粒渐满；小满小满，生活<span
                style="color: #323333;"></span>美满。
            </section>
            <section style="width:100%; text-align:center; margin-top:20px;">
                <section
                    style="display: inline-block; width: 20px; height: 20px; border-radius: 100%; background-color: rgb(207, 226, 200); overflow: hidden; box-sizing: border-box;"></section>
            </section>
            <section style="width:100%; text-align:center; margin-top:20px;">
                <section
                    style="display: inline-block; width: 20px; height: 20px; border-radius: 100%; background-color: rgb(220, 231, 216); overflow: hidden; box-sizing: border-box;"></section>
            </section>
            <section style="width:100%; text-align:center; margin-top:20px;">
                <section
                    style="display: inline-block; width: 20px; height: 20px; border-radius: 100%; background-color: rgb(246, 252, 244); overflow: hidden; box-sizing: border-box;"></section>
            </section>
        </section>
    </section>
    <section class="wxAyDiy">
        <section
            style="width:100%; display:flex; display:-webkit-flex; justify-content:center; -webkit-justify-content:center; margin-top:20px;">
            <section
                style="border-bottom: 2px solid #499328; border-top: 2px solid #499328; padding: 5px 2px; overflow: hidden; box-sizing: border-box;">
                <section
                    style="float:left; font-size:20px; width:20px; text-align:center; margin:0px 5px; font-weight:bold;">
                    <span style="color: #499328;">五月</span></section>
                <span style="color: #499328;"></span><br></section>
        </section>
        <section style="margin-left:10px; margin-top:-10px;">
            <section><br></section>
        </section>
    </section>
    <section class="wxAyDiy">
        <section style="width:100%; text-align:center; margin-top:20px; color:#434243;"><p style="text-align:left;">
            “花季清明，雨季小满”，5月20日，我们迎来了“小满”节气。</p>
            <p><br></p>
            <p style="text-align:left;">
                中国传统儒家中庸之道，忌讳“太满” 、“大满”，有“满招损、谦受益”、“物极必反”之说。</p>
            <p><br></p>
            <p style="text-align:left;">
                常言，月满则亏花满则凋，何必太过计较，用坦荡的心，走幸福的路，不求完美，但求灿烂。</p></section>
    </section>
    <section class="wxAyDiy">
        <section style="padding: 0.6em; box-sizing: border-box;">
            <section style="display: flex;justify-content: center;">
                <section style="width: 1.5em; height: 8em; background: rgb(207, 226, 200); overflow: hidden;"></section>
                <section style="width: 50%;margin-top: 1em;margin-left:-0.8em;">
                    <section style="width: 100%;"><img class="" src="http://cmswx.aykj.net/temp/1590496145866.jpg">
                        <section
                            style="width: 100%; height: 1.5em; background: rgb(207, 226, 200); margin-left: 1em; margin-top: -0.8em; overflow: hidden;"></section>
                    </section>
                </section>
                <section style="width: 50%;margin-left:8px;margin-top:4em;">
                    <section style="width: 100%;">
                        <section
                            style="width: 100%; height: 1.5em; background: rgb(207, 226, 200); margin-left: 1em; margin-bottom: -0.8em; overflow: hidden;"></section>
                        <img class="" src="http://cmswx.aykj.net/temp/1590496146479.jpg"><img class=""
                                                                                              src="http://cmswx.aykj.net/temp/1590496145317.jpg">
                    </section>
                </section>
            </section>
        </section>
    </section>
    <section><p><br></p></section>
    <section style="height: 0px; overflow: hidden;"></section>
    <section><p><br></p>
        <p><br></p></section>
    <section class="wxAyDiy">
        <section style="text-align: center; padding-bottom: 4px; margin: 10px auto; box-sizing: border-box;">
            <section style="display:inline-block;">
                <section class="assistant"
                         style="width: 40px; height: 40px; background-color: rgb(207, 226, 200); border-radius: 100%; margin-left: -13px; overflow: hidden; box-sizing: border-box;"></section>
                <section style="display: flex;justify-content:center;align-items: flex-end;margin-top:-21px;">
                    <section
                        style="box-sizing:border-box;padding-bottom:5px;border: 1px solid #f6fcf4;background-color:#f6fcf4;border-radius:4px;box-sizing: border-box;">
                        <section
                            style="margin-left:4px;margin-top: -7px;overflow:hidden;border:1px solid #499328;box-sizing: border-box;border-radius:4px;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">
                            <section class="135brush"
                                     style="margin:0px 6px;text-align: center; letter-spacing:5px;font-weight: bold; font-size: 18px; color:#f6fcf4; text-shadow: #499328 1px 1px, #499328 1px -1px, #499328 -1px 1px, #499328 -1px -1px, #499328 0px 1.4px, #499328 0px -1.4px, #499328 -1.4px 0px, #499328 1.4px 0px;box-sizing: border-box;padding:10px 1em 6px;">
                                1<span style="color: #434444;"></span>.万物生气盎然
                            </section>
                        </section>
                    </section>
                </section>
                <section class="assistant"
                         style="width: 25px; height: 25px; background-color: rgb(220, 231, 216); border-radius: 100%; margin-right: -8px; float: right; margin-top: -18px; overflow: hidden; box-sizing: border-box;"></section>
            </section>
        </section>
    </section>
    <section><p><br></p></section>
    <section class="wxAyDiy"><p>《月令七十二候集解》：“四月中，小满者，物致于此小得盈满。”</p>
        <p><br></p>
        <p>不满，则空留遗憾；过满，则招致损失；小满，才是最幸福的状态。</p>
        <p><br></p>
        <p>小满，万物生气盎然，又从容不迫：</p>
        <p><br></p>
        <p>麦粒饱满水稻插，蚕结新茧桑葚熟，菜籽舂油苦菜秀，期待一场如约而至的雨水，谷物生发，顺遂天时。</p>
        <p><br></p></section>
    <section class="wxAyDiy">
        <section style="margin:10px auto;">
            <section style="display:flex;justify-content: flex-start;align-items:center;">
                <section style="flex: 1 1 0%; padding-right: 20px; box-sizing: border-box;">
                    <section class="assistant"
                             style="width: 30px; height: 5px; background-color: rgb(207, 226, 200); overflow: hidden;"></section>
                    <section style="width:100%;margin-top:10px;"><img class=""
                                                                      src="http://cmswx.aykj.net/temp/1590496145866.jpg">
                    </section>
                </section>
                <section style="width: 55%;">
                    <section style="width:100%;"><img class="" src="http://cmswx.aykj.net/temp/1590496148335.jpg">
                    </section>
                </section>
            </section>
            <section style="display:flex;justify-content: flex-start;align-items:center;margin-top:10px;">
                <section style="width: 55%;">
                    <section style="width:100%;"><img class="" src="http://cmswx.aykj.net/temp/1590496148335.jpg">
                    </section>
                </section>
                <section
                    style="flex: 1 1 0%; padding-left: 10px; text-align: right; padding-right: 20px; box-sizing: border-box;">
                    <section
                        style="width:100%;margin-top:10px;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);">
                        <img class="" src="http://cmswx.aykj.net/temp/1590496145866.jpg"></section>
                    <section class="assistant" style="text-align: right;margin-top:-22px;">
                        <section class="assistant"
                                 style="width: 90px; height: 35px; background-color: rgb(207, 226, 200); display: inline-block; margin-right: -20px; overflow: hidden;"></section>
                    </section>
                </section>
            </section>
        </section>
    </section>
    <p><br></p>
    <p><br></p>
    <p><br></p>
    <section class="wxAyDiy">
        <section style="text-align: center; padding-bottom: 4px; margin: 10px auto; box-sizing: border-box;">
            <section style="display:inline-block;">
                <section class="assistant"
                         style="width: 40px; height: 40px; background-color: rgb(207, 226, 200); border-radius: 100%; margin-left: -13px; overflow: hidden; box-sizing: border-box;"></section>
                <section style="display: flex;justify-content:center;align-items: flex-end;margin-top:-21px;">
                    <section
                        style="box-sizing:border-box;padding-bottom:5px;border: 1px solid #f6fcf4;background-color:#f6fcf4;border-radius:4px;box-sizing: border-box;">
                        <section
                            style="margin-left:4px;margin-top: -7px;overflow:hidden;border:1px solid #499328;box-sizing: border-box;border-radius:4px;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);">
                            <section class="135brush"
                                     style="margin:0px 6px;text-align: center; letter-spacing:5px;font-weight: bold; font-size: 18px; color:#f6fcf4; text-shadow: #499328 1px 1px, #499328 1px -1px, #499328 -1px 1px, #499328 -1px -1px, #499328 0px 1.4px, #499328 0px -1.4px, #499328 -1.4px 0px, #499328 1.4px 0px;box-sizing: border-box;padding:10px 1em 6px;">
                                2<span style="color: #434444;"></span>.色彩斑斓的时节
                            </section>
                        </section>
                    </section>
                </section>
                <section class="assistant"
                         style="width: 25px; height: 25px; background-color: rgb(220, 231, 216); border-radius: 100%; margin-right: -8px; float: right; margin-top: -18px; overflow: hidden; box-sizing: border-box;"></section>
            </section>
        </section>
    </section>
    <p><br></p>
    <section class="wxAyDiy"><p><span style="color: #323333;">小满，正是色彩斑斓的时节。</span></p>
        <p><br></p>
        <p><span style="color: #323333;">樱桃已红了，芭蕉渐绿，麦穗饱满，稻秧尚青，一只只乳白色的蚕茧，也渐渐地丰满起来。</span></p>
        <p><br></p>
        <p><span style="color: #323333;">在草木丛深处，夏风轻轻掠过，田野如海浪般此起彼伏，那饱满的麦穗，是沉甸甸的收获，是丰收在望的喜悦。</span></p>
        <p><br></p>
        <p><span style="color: #323333;">麦已灌浆，青绿麦风冉冉，已有了嫩颗甜香，但麦熟还早。</span></p>
        <p><br></p>
        <p><span style="color: #323333;">青梅已可煮酒，但还青涩，黄梅雨后，果实才累枝。</span></p>
        <p><br></p></section>
    <section class="wxAyDiy">
        <section style="padding: 0.6em; box-sizing: border-box;">
            <section style="display: flex;justify-content: center;">
                <section style="width: 1.5em; height: 8em; background: rgb(207, 226, 200); overflow: hidden;"></section>
                <section style="width: 50%;margin-top: 1em;margin-left:-0.8em;">
                    <section style="width: 100%;"><img class="" src="http://cmswx.aykj.net/temp/1590496145866.jpg">
                        <section
                            style="width: 100%; height: 1.5em; background: rgb(207, 226, 200); margin-left: 1em; margin-top: -0.8em; overflow: hidden;"></section>
                    </section>
                </section>
                <section style="width: 50%;margin-left:8px;margin-top:4em;">
                    <section style="width: 100%;">
                        <section
                            style="width: 100%; height: 1.5em; background: rgb(207, 226, 200); margin-left: 1em; margin-bottom: -0.8em; overflow: hidden;"></section>
                        <img class="" src="http://cmswx.aykj.net/temp/1590496146479.jpg"><img class=""
                                                                                              src="http://cmswx.aykj.net/temp/1590496145317.jpg">
                    </section>
                </section>
            </section>
        </section>
    </section>
    <p><br></p>
    <section><p><br></p></section>
    <section class="wxAyDiy">
        <section style="width:60px;margin:0px auto;"><img class="" src="http://cmswx.aykj.net/temp/1590496151840.jpg">
        </section>
    </section>
    <section><p><br></p></section>
    <section class="wxAyDiy"><p style="text-align:center;"><br></p>
        <p style="text-align:center;"><span style="caret-color: red; font-size: 13px; color: #323333;">排版 |
				奥远科技</span></p>
        <p style="text-align:center;"><span style="caret-color: red; font-size: 13px; color: #323333;">文案 |
				网络（侵删）</span></p>
        <p style="text-align:center;"><span style="caret-color: red; font-size: 13px; color: #323333;">图片 |
				不可商用</span></p></section>
    <p><br></p>
    <p><br></p>
    <section class="wxAyDiy">
        <section style="padding-right: 2em; box-sizing: border-box;">
            <section
                style="width:2em;height:2em;background: #fefefe;overflow: hidden;margin-bottom: -2em;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);">
                <section
                    style="height: 3em; border-left: 2px solid rgb(207, 226, 200); margin-left: 12px; overflow: hidden;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);"></section>
            </section>
            <section style="box-sizing:border-box;border:2px solid #cfe2c8;padding: 1em;">
                <section style="display: flex;justify-content:space-between;align-items: center;">
                    <section
                        style="width: 50%; text-align: left; font-size: 14px; letter-spacing: 1.5px; color: #cfe2c8;">
                        <section style="font-size: 14px;text-align: justify;letter-spacing: 1.5px;line-height: 1.75em;">
                            <section class="135brush"
                                     style="font-size: 14px;color: #cfe2c8;letter-spacing: 2px;line-height: 1.75em;"><p>
                                <span style="color: #499328;">扫码关注</span></p></section>
                            <section
                                style="display: flex;justify-content:space-between;align-items: center;flex:1;margin:10px auto;">
                                <section style="display: flex;justify-content:center;align-items: center;">
                                    <section
                                        style="width: 4em; height: 1.4em; background: rgb(220, 235, 213); overflow: hidden;"></section>
                                    <section
                                        style="width: 3em; height: 0.6em; background: rgb(191, 217, 182); margin-left: -1em; overflow: hidden;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);"></section>
                                </section>
                            </section>
                            <section class="135brush"
                                     style="font-size: 14px;color: #cfe2c8;letter-spacing: 2px;line-height: 1.75em;"><p>
                                <span style="color: #499328;">有趣的灵魂在等你</span></p></section>
                        </section>
                    </section>
                    <section style="width: 45%;flex:1;margin-left:1em;margin-right: -3em;"><img class=""
                                                                                                src="http://cmswx.aykj.net/temp/1590496152353.jpg">
                    </section>
                </section>
            </section>
        </section>
    </section>
    <p><br></p>
    <section><p><br></p></section>
    <section class="wxAyDiy"><p><br></p></section>
    <button @click="screen()">截图</button>
</div>
<script>
	function screen(){
	    html2canvas(document.querySelector("#content")).then(canvas => {
		    let url = canvas.toDataURL("image/png", 1.0);
		    console.log(url, "——————————————这是url——————————")
		    document.body.appendChild(canvas)
		    console.log(canvas, "——————————————这是canvas——————————")
	    })
    }
</script>
</body>
</html>